//控制数据
var picPath = "../singlepage/src/img/picShow/";
var imgdata = [
    {'name':'img1','divclass':'main main-active','titleclass':'title title-active','controllerclass':'item-i item-i-active','src':picPath + '1.jpg','title1':'h2 caption','title2':'h3 caption'},
    {'name':'img2','divclass':'main','titleclass':'title','controllerclass':'item-i','src': picPath + '2.jpg','title1':'h2 caption','title2':'h3 caption'},
    {'name':'img3','divclass':'main','titleclass':'title','controllerclass':'item-i','src':picPath + '3.jpg','title1':'h2 caption','title2':'h3 caption'},
    {'name':'img4','divclass':'main','titleclass':'title','controllerclass':'item-i','src':picPath + '4.jpg','title1':'h2 caption','title2':'h3 caption'},
    {'name':'img5','divclass':'main','titleclass':'title','controllerclass':'item-i','src':picPath + '5.jpg','title1':'h2 caption','title2':'h3 caption'},
    {'name':'img6','divclass':'main','titleclass':'title','controllerclass':'item-i','src':picPath + '6.jpg','title1':'h2 caption','title2':'h3 caption'},
    {'name':'img7','divclass':'main','titleclass':'title','controllerclass':'item-i','src':picPath + '7.jpg','title1':'h2 caption','title2':'h3 caption'}
];

//变量
var main = document.getElementsByClassName("main");
var item_i = document.getElementsByClassName("item-i");
var title = document.getElementsByClassName("title");
var content = document.getElementsByClassName("content");
var controller = document.getElementsByClassName("controller");
var num = 0;
var nextNum = 1;
var attr = 0;
var timer;
var imgCode = '';
var controllerCode = '';
var imgNum = imgdata.length;

htmlInit();

function htmlInit(){
    var temp = 0;
    for(var i=0;i<imgNum;i++){
        temp = i;
        imgCode += '<div class="'+ imgdata[temp].divclass +'">' +
            '<div class="' + imgdata[temp].titleclass + '">' +
            '<h3>' + imgdata[temp].title2 + '</h3>' +
            '<h2>' + imgdata[temp].title1 + '</h2>' +
            '</div>' +
            '<img src="'+ imgdata[temp].src + '"/>' +
            '</div>';
        controllerCode += '<a href="javascript:;" class="' +imgdata[temp].controllerclass + '"><img src="' + imgdata[temp].src + '" /></a>';
    }
    content[0].innerHTML += imgCode;
    controller[0].innerHTML += controllerCode;

    var width = parseInt(getComputedStyle(controller[0],false)['width']);
    /*
    for(var i=0;i<item_i.length;i++){
        item_i[i].style.width = width/imgNum + 'px';
    }
    */
    for(var i=0;i<imgNum;i++){
        //console.log(num);
        num = i;
        item_i[i].setAttribute("num",num);
        item_i[i].addEventListener('click',clickControl);
    }
    timerFunc();
}


function clickControl(){
    attr = this.getAttribute("num");

    for(var i=0;i<imgNum;i++){
        item_i[i].className = "item-i";
        main[i].className = "main";
        title[i].className = "title";
    }

    item_i[attr].className = "item-i item-i-active";
    main[attr].className = "main main-active";
    title[attr].className = "title title-active";

    nextNum = parseInt(attr) + 1;
    console.log("点击后的nextNum = " + nextNum);
    clearInterval(timer);
    setTimeout("timerFunc();",0);
}


function timerFunc(){
    timer = setInterval(function (){
        if(nextNum >= imgNum){
            nextNum = 0;
        }
        //console.log("自动切换的nextNum = " +nextNum);
        for(var i=0;i<imgNum;i++){
            item_i[i].className = "item-i";
            main[i].className = "main";
            title[i].className = "title";
        }
        item_i[nextNum].className = "item-i item-i-active";
        main[nextNum].className = "main main-active";
        title[nextNum].className = "title title-active";
        nextNum ++ ;
    },4000);
}